React useFormState مسار التحقق من الصحة: إتقان التحقق من الصحة متعدد المراحل للنماذج

يعد بناء نماذج معقدة مع التحقق من الصحة القوي تحديًا شائعًا في تطوير الويب الحديث. يقدم React's useFormState hook طريقة قوية ومرنة لإدارة حالة النموذج والتحقق من صحته، مما يتيح إنشاء مسارات تحقق متطورة متعددة المراحل. سيرشدك هذا الدليل الشامل خلال العملية، من فهم الأساسيات إلى تنفيذ استراتيجيات التحقق غير المتزامنة المتقدمة.

لماذا التحقق من صحة النماذج متعدد المراحل؟

يمكن أن يصبح التحقق من صحة النموذج التقليدي أحادي المرحلة مرهقًا وغير فعال، خاصةً عند التعامل مع النماذج التي تحتوي على العديد من الحقول أو التبعيات المعقدة. يتيح لك التحقق من الصحة متعدد المراحل ما يلي:

• تحسين تجربة المستخدم: توفير ملاحظات فورية حول أقسام معينة من النموذج، وتوجيه المستخدمين خلال عملية الإكمال بشكل أكثر فعالية.
• تحسين الأداء: تجنب عمليات التحقق غير الضرورية من صحة النموذج بأكمله، وتحسين الأداء، خاصةً للنماذج الكبيرة.
• زيادة قابلية صيانة التعليمات البرمجية: تقسيم منطق التحقق إلى وحدات أصغر يمكن التحكم فيها، مما يجعل التعليمات البرمجية أسهل في الفهم والاختبار والصيانة.

فهم useFormState

يوفر useFormState hook (غالبًا ما يكون متاحًا في مكتبات مثل react-use أو عمليات التنفيذ المخصصة) طريقة لإدارة حالة النموذج وأخطاء التحقق من الصحة ومعالجة الإرسال. تتضمن وظائفه الأساسية ما يلي:

• إدارة الحالة: تخزين القيم الحالية لحقول النموذج.
• التحقق من الصحة: تنفيذ قواعد التحقق من الصحة مقابل قيم النموذج.
• تتبع الأخطاء: تتبع أخطاء التحقق من الصحة المرتبطة بكل حقل.
• معالجة الإرسال: يوفر آليات لإرسال النموذج ومعالجة نتيجة الإرسال.

بناء مسار تحقق أساسي

لنبدأ بمثال بسيط لنموذج من مرحلتين: المعلومات الشخصية (الاسم، البريد الإلكتروني) ومعلومات العنوان (الشارع، المدينة، البلد).

الخطوة 1: تحديد حالة النموذج

أولاً، نحدد الحالة الأولية لنموذجنا، والتي تشمل جميع الحقول:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

الخطوة 2: إنشاء قواعد التحقق من الصحة

بعد ذلك، نحدد قواعد التحقق من الصحة الخاصة بنا. في هذا المثال، لنطلب أن تكون جميع الحقول غير فارغة والتأكد من أن البريد الإلكتروني بتنسيق صالح.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'هذا الحقل مطلوب.';
  }

  if (fieldName === 'email' && !/^\w[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
    return 'تنسيق البريد الإلكتروني غير صالح.';
  }

  return null; // لا يوجد خطأ
};

الخطوة 3: تنفيذ useFormState Hook

الآن، دعنا ندمج قواعد التحقق من الصحة في مكون React الخاص بنا باستخدام useFormState hook (الافتراضي):

import React, { useState } from 'react';

// بافتراض وجود تنفيذ مخصص أو مكتبة مثل react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // التحقق من الصحة عند التغيير لتحسين تجربة المستخدم (اختياري)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); //الدمج مع الأخطاء الموجودة
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // إرسال النموذج
      console.log('تم إرسال النموذج:', values);
      alert('تم إرسال النموذج!'); //استبدل بمنطق الإرسال الفعلي
    } else {
      console.log('النموذج يحتوي على أخطاء، يرجى تصحيحها.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
المعلومات الشخصية
          
            الاسم الأول:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            الاسم الأخير:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            البريد الإلكتروني:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
معلومات العنوان
          
            الشارع:
            
            {errors.street && {errors.street}}
          
          

          
            المدينة:
            
            {errors.city && {errors.city}}
          
          

          
            البلد:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && السابق}
        {currentStage < 2 && التالي}
        {currentStage === 2 && إرسال}
      
    
  );
};

export default MyForm;

الخطوة 4: تنفيذ التنقل بين المراحل

استخدم متغيرات الحالة لإدارة المرحلة الحالية من النموذج وعرض قسم النموذج المناسب بناءً على المرحلة الحالية.

تقنيات التحقق المتقدمة

التحقق غير المتزامن

في بعض الأحيان، يتطلب التحقق من الصحة التفاعل مع خادم، مثل التحقق مما إذا كان اسم المستخدم متاحًا. وهذا يستلزم التحقق غير المتزامن. إليك كيفية دمجه:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // اسم المستخدم متاح
    } else {
      return 'اسم المستخدم مأخوذ بالفعل.';
    }
  } catch (error) {
    console.error('خطأ في التحقق من اسم المستخدم:', error);
    return 'خطأ في التحقق من اسم المستخدم. يرجى المحاولة مرة أخرى.'; // التعامل مع أخطاء الشبكة بأمان
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // إرسال النموذج
        console.log('تم إرسال النموذج:', values);
        alert('تم إرسال النموذج!'); //استبدل بمنطق الإرسال الفعلي
      } else {
        console.log('النموذج يحتوي على أخطاء، يرجى تصحيحها.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //اختياري: عرض رسالة تحميل أثناء التحقق من الصحة
  };
};

يتضمن هذا المثال وظيفة validateUsername التي تجري استدعاء واجهة برمجة تطبيقات للتحقق من توفر اسم المستخدم. تأكد من التعامل مع أخطاء الشبكة المحتملة وتقديم ملاحظات مناسبة للمستخدم.

التحقق المشروط

قد تتطلب بعض الحقول التحقق من الصحة بناءً على قيمة الحقول الأخرى. على سبيل المثال، قد يكون حقل "موقع الشركة" مطلوبًا فقط إذا أشار المستخدم إلى أنه موظف. قم بتنفيذ التحقق المشروط داخل وظائف التحقق من الصحة الخاصة بك:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'موقع الشركة مطلوب إذا كنت موظفًا.';
  }
  return validateField(fieldName, value); // تفويض إلى التحقق الأساسي
};

قواعد التحقق الديناميكية

في بعض الأحيان، يجب أن تكون قواعد التحقق نفسها ديناميكية، بناءً على عوامل أو بيانات خارجية. يمكنك تحقيق ذلك عن طريق تمرير قواعد التحقق الديناميكية كوسيطات إلى وظائف التحقق من الصحة الخاصة بك:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `يجب أن يكون هذا الحقل أقل من ${rules[fieldName].maxLength} حرفًا.`
  }
  return validateField(fieldName, value); // تفويض إلى التحقق الأساسي
};

التعامل مع الأخطاء وتجربة المستخدم

يعد التعامل الفعال مع الأخطاء أمرًا بالغ الأهمية لتجربة مستخدم إيجابية. ضع في اعتبارك ما يلي:

• عرض الأخطاء بوضوح: ضع رسائل الخطأ بالقرب من حقول الإدخال المقابلة. استخدم لغة واضحة وموجزة.
• التحقق من الصحة في الوقت الفعلي: تحقق من صحة الحقول أثناء كتابة المستخدم، وقدم ملاحظات فورية. كن على دراية بآثار الأداء؛ قم بإلغاء ارتداد أو تقليل استدعاءات التحقق من الصحة إذا لزم الأمر.
• التركيز على الأخطاء: بعد الإرسال، ركز انتباه المستخدم على الحقل الأول الذي يحتوي على خطأ.
• إمكانية الوصول: تأكد من أن رسائل الخطأ في متناول المستخدمين ذوي الإعاقة، وذلك باستخدام سمات ARIA و HTML الدلالي.
• تدويل (i18n): قم بتنفيذ تدويل مناسب لعرض رسائل الخطأ باللغة المفضلة للمستخدم. يمكن أن تساعد خدمات مثل i18next أو Native JavaScript Intl API.

أفضل الممارسات للتحقق من صحة النماذج متعدد المراحل

• حافظ على قواعد التحقق موجزة: قسّم منطق التحقق المعقد إلى وظائف أصغر وقابلة لإعادة الاستخدام.
• اختبر بدقة: اكتب اختبارات الوحدة للتأكد من دقة وموثوقية قواعد التحقق من الصحة الخاصة بك.
• استخدم مكتبة التحقق من الصحة: ضع في اعتبارك استخدام مكتبة تحقق مخصصة (على سبيل المثال، Yup، Zod) لتبسيط العملية وتحسين جودة التعليمات البرمجية. غالبًا ما توفر هذه المكتبات التحقق المستند إلى المخطط، مما يسهل تحديد قواعد التحقق المعقدة وإدارتها.
• تحسين الأداء: تجنب عمليات التحقق غير الضرورية من الصحة، خاصة أثناء التحقق في الوقت الفعلي. استخدم تقنيات التخزين المؤقت لتخزين نتائج التحقق من الصحة مؤقتًا.
• تقديم تعليمات واضحة: قم بتوجيه المستخدمين خلال عملية إكمال النموذج بتعليمات واضحة وتلميحات مفيدة.
• ضع في اعتبارك الكشف التدريجي: اعرض فقط الحقول ذات الصلة بكل مرحلة، مما يبسط النموذج ويقلل العبء المعرفي.

المكتبات والأساليب البديلة

بينما يركز هذا الدليل على useFormState hook مخصص، توجد العديد من مكتبات النماذج الممتازة التي توفر وظائف مماثلة، غالبًا مع ميزات إضافية وتحسينات في الأداء. تتضمن بعض البدائل الشائعة ما يلي:

• Formik: مكتبة مستخدمة على نطاق واسع لإدارة حالة النموذج والتحقق من صحته في React. يقدم نهجًا تعريفيًا لمعالجة النماذج ويدعم استراتيجيات التحقق المختلفة.
• React Hook Form: مكتبة تركز على الأداء وتستفيد من المكونات غير الخاضعة للرقابة و React's ref API لتقليل عمليات إعادة العرض. يوفر أداءً ممتازًا للنماذج الكبيرة والمعقدة.
• Final Form: مكتبة متعددة الاستخدامات تدعم أطر واجهة مستخدم مختلفة ومكتبات التحقق من الصحة. يقدم واجهة برمجة تطبيقات مرنة وقابلة للتوسيع لتخصيص سلوك النموذج.

يعتمد اختيار المكتبة المناسبة على متطلباتك وتفضيلاتك الخاصة. ضع في اعتبارك عوامل مثل الأداء وسهولة الاستخدام ومجموعة الميزات عند اتخاذ قرارك.

الاعتبارات الدولية

عند إنشاء نماذج لجمهور عالمي، من الضروري مراعاة التدويل والتعريب. فيما يلي بعض الجوانب الرئيسية:

• تنسيقات التاريخ والوقت: استخدم تنسيقات التاريخ والوقت الخاصة بالإعدادات المحلية لضمان الاتساق وتجنب الالتباس.
• تنسيقات الأرقام: استخدم تنسيقات الأرقام الخاصة بالإعدادات المحلية، بما في ذلك رموز العملات والفواصل العشرية.
• تنسيقات العناوين: قم بتكييف حقول العناوين مع تنسيقات البلدان المختلفة. قد تتطلب بعض البلدان الرموز البريدية قبل المدن، بينما قد لا يكون لدى البعض الآخر رموز بريدية على الإطلاق.
• التحقق من أرقام الهواتف: استخدم مكتبة التحقق من أرقام الهواتف التي تدعم تنسيقات أرقام الهواتف الدولية.
• ترميز الأحرف: تأكد من أن النموذج الخاص بك يعالج مجموعات الأحرف المختلفة بشكل صحيح، بما في ذلك Unicode والأحرف غير اللاتينية الأخرى.
• تخطيط من اليمين إلى اليسار (RTL): ادعم لغات RTL مثل العربية والعبرية عن طريق تكييف تخطيط النموذج وفقًا لذلك.

من خلال النظر في هذه الجوانب الدولية، يمكنك إنشاء نماذج يسهل الوصول إليها وسهلة الاستخدام لجمهور عالمي.

الخلاصة

يمكن أن يؤدي تنفيذ مسار للتحقق من صحة النماذج متعدد المراحل باستخدام React's useFormState hook (أو المكتبات البديلة) إلى تحسين تجربة المستخدم بشكل كبير وتحسين الأداء وزيادة قابلية صيانة التعليمات البرمجية. من خلال فهم المفاهيم الأساسية وتطبيق أفضل الممارسات الموضحة في هذا الدليل، يمكنك إنشاء نماذج قوية وقابلة للتطوير تلبي متطلبات تطبيقات الويب الحديثة.

تذكر إعطاء الأولوية لتجربة المستخدم، والاختبار بدقة، وتكييف استراتيجيات التحقق من الصحة الخاصة بك مع المتطلبات المحددة لمشروعك. من خلال التخطيط والتنفيذ الدقيقين، يمكنك إنشاء نماذج وظيفية وممتعة للاستخدام.

مزيد من التعلم

• وثائق React الرسمية
• وثائق Formik
• وثائق React Hook Form